<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-10 09:30:43
 * @LastEditTime: 2019-09-11 14:19:54
 * @LastEditors: Please set LastEditors
 -->
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" data-namespace-typo3-fluid="true">
    <!-- 报名模态框 -->
    <div class="modal fade signupmodal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="myModalLabel">
                        志愿者活动
                        <f:if condition="{issign}">
                            <f:then>签到</f:then>
                            <f:else>报名</f:else>
                        </f:if>
                    </h4>
                </div>
                <div class="modal-body">
                    <div class="form-group row">
                        <div class="col-md-3">
                            <label class="control-label">姓名<font color="red">*</font></label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" name="name" class="form-control sign-val" placeholder="请输入姓名" id="sign_name" />
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-md-3">
                            <label class="control-label">手机号<font color="red">*</font></label>
                        </div>
                        <div class="col-md-9">
                            <input type="text" name="telephone" class="form-control sign-val" placeholder="请输入手机号" id="sign_telephone" />
                        </div>
                    </div>
                </div>
                <input type="hidden" name="activityuid" value="{activity.uid}" class="sign-val" id="sign_actuid" />
                <f:if condition="{issign}">
                    <f:then>
                        <!-- 签到表单 -->
                        <input type="hidden" name="flag" value="checkIn" class="sign-val" id="sign_formtype"/>
                    </f:then>
                    <f:else>
                        <!-- 报名表单 -->
                        <input type="hidden" name="flag" value="signIn" class="sign-val" id="sign_formtype" />
                    </f:else>
                </f:if>
                
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-success" data-dismiss="modal" onclick="submitData();">报名</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>
    <style>
    #signupModal{margin-top: 10%;}
        #signupModal .glyphicon-ok-circle{color: green;font-size: 50px;top: 13px;margin-right: 18px;}
        #signupModal span{color: #4f4c4c;font-size: 30px;font-weight: bold;display: inline-block;margin-left: 20px;}
    </style>
    <!-- 报名成功模态框 -->
        <div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">活动报名</h4>
                    </div>
                    <div class="modal-body">
                        <div class="text-center">
                            <i class="glyphicon glyphicon-ok-circle"></i>
                            <span id="ajax_msg"></span>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal -->
        </div>
    <f:link.action action="ajax" id="ajaxdata" ></f:link.action>
    <script>
        function submitData() {
            var data = {};
            var url = $("#ajaxdata").attr('href');
            $('.sign-val').each(function (key, value) {
                name = $(this).prop("name");
                val = $(this).val();
                data[name] = val;
            });
            // console.log(data);
            $.post(url, data, function (data, status) {
                    console.log(data);
                    if(data.stat==0 || data.stat == 1){
                       $("#ajax_msg").text(data.msg); 
                       $("#signupModal").modal(); 
                    } else if (data.stat == 2) {
                        location.href = data.uri;
                    }
            },'json');
        }
    </script>
</html>